<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MSE VOD Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/awsm.css/dist/awsm.min.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans|PT+Serif:400,400i,700,700i&amp;subset=cyrillic" rel="stylesheet">
</head>
<body>
<h1>MSE VOD Demo</h1>
<video autoplay controls></video>
<script>
    var video = document.querySelector('video');
    var wsURL = 'ws://localhost:8327/media';
    // Need to be specific for Blink regarding codecs
    // ./mp4info test.mp4 | grep Codec
    var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
    } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
    }
    function sourceOpen(_) {
        console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchMedia(wsURL, function (buf) {
            sourceBuffer.addEventListener('updateend', function (_) {
                mediaSource.endOfStream();
                video.play();
                console.log(mediaSource.readyState); // ended
            });
            sourceBuffer.appendBuffer(buf);
        });
    };
    function fetchMedia(url, cb) {
        console.log(url);
        ws = new WebSocket(url);
        ws.binaryType = "arraybuffer";
        ws.onopen = function () {
            console.log("connected")
        };
        ws.onmessage = function (e) {
            cb(e.data);
        };
        ws.onclose = function () {
            console.log("closed")
        };
        ws.onerror = function (e) {
            console.log(e.msg);
        };
    };
</script>
</body>
</html>
